<!DOCTYPE html>
<html>
<head>
    <title>SelectMenu使用实例</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="../lib/font-awesome-4/css/font-awesome.min.css" />
    
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shCore.css" type="text/css">
	<link rel="stylesheet" href="../lib/syntaxhighlighter/styles/shThemeDefault.css" type="text/css">
	
    <link rel="stylesheet" href="../lib/selectmenu/selectmenu.css" type="text/css">
    <link rel="stylesheet" href="../lib/selectpage/selectpage.css" type="text/css">
    <link rel="stylesheet" href="../lib/bdialog/b.dialog.bootstrap3.css" type="text/css">
    
	<link rel="stylesheet" href="../css/selectmenu/header.css" />
	<link rel="stylesheet" href="../css/selectmenu/demo.css" />
</head>

<body>
	<div class="content">
	<div class="container">
		<h1 class="page-header">下拉菜单插件 <small>支持下拉，分页，键盘操作等功能</small></h1>
		<div class="row-fluid">
			<h2 class="page-header">1.经典使用场景 <small></small></h2>
            <div class="col-md-12">
                <div class="col-md-6">
                    <p><strong>A</strong>. Select your favorite NBA team:
                        <button type="button" class="btn btn-default" id="demoSingle">Select Team</button>
                    </p>
                    <div class="thumbnail">
                        <img id="nbaTeamLogo">
                        <div class="caption">
                            <p id="nabTeamName"></p>
                        </div>
                    </div>
                    <p>The NBA team logo images copyright comes form <a href="http://china.nba.com" target="_blank">china.nba.com</a></p>
                </div>
                <div class="col-md-6">
                    <p><strong>B</strong>. Choose teams to follow team news:
                        <button type="button" class="btn btn-default" id="demoMultiple">Select Teams</button>
                    </p>
                    <div class="panel panel-default">
                        <div class="panel-body" id="nbaTeamLists"></div>
                    </div>
                </div>
            </div>
		</div>

        <div class="row-fluid">
            <div class="col-md-12">
                <div class="col-md-6">
                    <p><strong>C</strong>. Which site you want to visit ?</p>
                    <p><button type="button" class="btn btn-default" id="demoBaseMenu">Select Menu <i class="fa fa-caret-down"></i></button></p>
                </div>
                <div class="col-md-6">
                    <p><strong>D</strong>. Menu embedded to page</p>
                    <div id="demoEmbedded"></div>
                </div>
            </div>
        </div>

        <div class="row-fluid">
            <div class="col-md-12">
                <div class="col-md-12">
                    <strong>E</strong>. your mouse right click to call menu
                    <div class="jumbotron" id="demoRightClick">
                        <h2 class="text-center"><i class="fa fa-mouse-pointer"></i> Mouse right click this area</h2>
                    </div>
                </div>
            </div>
        </div>



        <div class="row-fluid">
            <h2 class="page-header">2.1 常规下拉菜单 <small></small></h2>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//菜单使用的数据格式
/**
 * content  [string]   : 菜单项目显示文本，支持HTML格式（设置内容为“sm_divider”可生成分隔栏）
 * header   [boolean]  : 是否为子标题栏
 * url      [string]   : 需要跳转的链接
 * callback [function] : 需要执行的回调函数
 * disabled [boolean]  : 是否禁用菜单项目
 */
var menuData = [
    {content:'News Site',header: true},//定义子标题栏
    {content:'163 NetEase',url : 'http://www.163.com'},//链接跳转型菜单项目
    {content:'sm_divider'},//分隔栏
    //使用HTML的方式设置菜单显示的内容，并定义菜单项目为禁用
    {content:'<i class="fa fa-fw fa-facebook"></i> Facebook',url : 'https://www.facebook.com',disabled : true},
    //点击后执行回调的菜单项目
    {content:'Click this menu item to trigger your callback',callback : function(){
        bDialog.alert('you can do anything in callback!');
    }}
];
]]>
            </script>
            <button type="button" class="btn btn-default" id="baseMenu"><i class="fa fa-bars"></i> Select Menu</button>


            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//HTML按钮
<button type="button" id="btnMenu" >Select Team</button>
//javascript 设置
$('#btnMenu').click(function(){
    $(this).selectMenu({
        //设置常规菜单模式
        regular : true,
        data : menuData
    });
});
]]>
            </script>
            <div class="alert alert-info" role="alert">
                示例中，带回调的菜单项目中的弹出窗口为 <a href="https://terryz.github.io/bdialog/index.html" target="_blank"><strong>bDialog</strong></a> 插件
            </div>
        </div>

        <div class="row-fluid">
            <h4 class="heading">2.2 带标题栏的菜单 <small></small></h4>
            <button type="button" class="btn btn-default" id="baseMenuHeader"><i class="fa fa-header"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        title : '<i class="fa fa-fw fa-thumbs-o-up"></i> I can have a title bar',
        regular : true,
        data : menuData
    });
});
]]>
            </script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">2.3 带子标题菜单项目的菜单 <small></small></h4>
            <button type="button" class="btn btn-default" id="baseMenuSubHeader"><i class="fa fa-list-ul"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//设置数据中项目header : true，即可指定为子标题栏
var menuData = [
    {content:'News Site',header: true}
];
//javascript 设置
$('#btnMenu').click(function(){
    $(this).selectMenu({
        regular : true,
        data : menuData
    });
});
]]>
            </script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">2.4 带箭头的菜单 <small></small></h4>
            <button type="button" class="btn btn-default" id="baseMenuArrow"><i class="fa fa-arrow-up"></i> 带箭头的菜单</button>
            <button type="button" class="btn btn-default" id="baseMenuRight"><i class="fa fa-arrow-right"></i> 菜单右对齐</button>
            <button type="button" class="btn btn-default" id="baseMenuCenter"><i class="fa fa-arrow-down"></i> 菜单居中对齐</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        arrow : true,//打开菜单箭头，默认不带箭头
        position : 'right',//可设置'left'(default),'center','right'
        regular : true,
        data : menuData
    });
});
]]>
            </script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">2.5 多级菜单 <small></small></h4>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//多级菜单数据格式
var menuData = [
    {content:'Sports',menus: [
        {content:'Fivb',url : 'http://www.fivb.com/'},
        {content:'Fifa',url : 'http://www.fifa.com/'},
        {content:'NBA',menus: [
            {content:'NBA official site',url : 'http://www.nba.com'},
            {content:'Chicago Bulls',url : 'http://www.nba.com/bulls/'},
            {content:'Los Angeles Lakers',url : 'www.nba.com/lakers/'}
        ]}
    ]},
    {content:'News',menus: [
        {content:'BBC',url : 'http://www.bbc.com/news'},
        {content:'CNN',url : 'http://www.cnn.com'},
        {content:'Xinhua',url : 'http://www.xinhuanet.com'}
    ]},
    {content:'Technology',menus: [
        {content:'Github',url : 'https://github.com'},
        {content:'StackOverflow',url : 'https://stackoverflow.com/'},
        {content:'Reddit',url : 'https://www.reddit.com'}
    ]},
    {content:'Social',menus: [
        {content:'Facebook',url : 'https://www.facebook.com'},
        {content:'Twitter',url : 'https://twitter.com'}
    ]}
];
]]>
            </script>
            <button type="button" class="btn btn-default" id="baseMenuMultiLevel"><i class="fa fa-flag"></i> Multiple level menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//区别的只是数据格式，初始化参数与常规菜单模式一致
$('#btnMenu').click(function(){
    $(this).selectMenu({
        regular : true,
        data : baseMultiLevelMenuData
    });
});
]]>
            </script>
        </div>


        <div class="row-fluid">
            <h2 class="page-header">3.1 高级下拉菜单 <small></small></h2>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//菜单使用的示例数据格式
//数据格式与常规菜单模式的固定格式不同，该模式下，数据格式可以完全自定义
//并通过设置keyField、showField、searchField等参数进行指定具体使用的数据节点
var selectMenuData = [
    {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛',abbr:'CHI'},
    {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士',abbr:'CLE'},
    {id:3 ,name:'Detroit Pistons',desc:'底特律活塞',abbr:'DET'},
    {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者',abbr:'IND'},
    {id:5 ,name:'Milwaukee Bucks',desc:'密尔沃基雄鹿',abbr:'MIL'}
];
]]>
            </script>
            <button type="button" class="btn btn-default" id="selectMenuBase"><i class="fa fa-server"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//HTML按钮
<button type="button" id="btnMenu" >Select Team</button>
//javascript 设置
$('#btnMenu').click(function(){
    $(this).selectMenu({
        showField : 'name',//指定显示文本的字段
        keyField : 'id',//指定id的字段
        searchField : 'abbr',//指定实际进行搜索的字段
        data : selectMenuData
    });
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">3.2 不需要快速搜索的下拉菜单 <small></small></h4>
            <button type="button" class="btn btn-default" id="selectMenuNoSearch"><i class="fa fa-server"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        search : false,//关闭搜索栏
        data : selectMenuData
    });
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">3.3 指定菜单显示项目个数 <small></small></h4>
            <button type="button" class="btn btn-default" id="selectMenuListSize"><i class="fa fa-server"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        search : false,
        title : false,//关闭标题栏
        listSize : 5,//设置显示的菜单项目个数（菜单高度）
        data : selectMenuData
    });
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">3.4 多分组数据下拉菜单、多选模式 <small></small></h4>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//多分组格式数据，要求数据必须按照以下格式设置，但list节点内的数据，与不分组的数据格式一样，可以自由定义
var selectMenuGroupData = [{
    title : 'East',
    list :[
        {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛',abbr:'CHI'},
        {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士',abbr:'CLE'}
    ]
},{
    title : 'West',
    list : [
        {id:16,name:'Denver Nuggets',desc:'丹佛掘金',abbr:'DEN'},
        {id:17,name:'Minnesota Timberwolves',desc:'明尼苏达森林狼',abbr:'MIN'}
    ]}
];
]]>
            </script>
            <button type="button" class="btn btn-default" id="selectMenuGroup"><i class="fa fa-server"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        multiple : true,//打开多选模式
        data : selectMenuGroupData
    });
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">3.5 初始化选中项目 <small></small></h4>
            <button type="button" class="btn btn-default" id="selectMenuInit"><i class="fa fa-server"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        arrow : true,
        initSelected : 1,
        data : selectMenuData
    });
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">3.6 自定义项目显示模板 <small></small></h4>
            <button type="button" class="btn btn-default" id="selectMenuFormat"><i class="fa fa-server"></i> Select Menu</button>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        initSelected : 1,
        //自定义菜单项目显示模板
        formatItem : function(row){
            var html = '<div class=""><div class="col-md-3">';
            html += '<img src="image.jpg" width="64" height="64">';
            html += '</div>';
            html += '<div class="col-md-7">';
            html += row.name + row.name + '<br>' + row.desc;
            html += '</div></div>';
            return html;
        },
        data : selectMenuData
    });
});
]]>
</script>
        </div>

        <div class="row-fluid">
            <h4 class="heading">3.7 回调事件 <small></small></h4>
            <div class="row">
                <div class="col-md-6">
                    <button type="button" class="btn btn-default" id="selectMenuCallback"><i class="fa fa-server"></i> Select Menu</button>
                </div>
                <div class="col-md-6">
                    <div class="panel panel-default">
                        <div class="panel-body" id="panelCallbackDemo"></div>
                    </div>
                </div>
            </div>

            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$('#btnMenu').click(function(){
    var $box = $('#panelCallbackDemo');
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        multiple : true,
        data : selectMenuGroupData,
        //项目选中事件
        eSelect : function(data){
            $box.empty();
            if(data && data.length){
                $.each(data, function(i, row){
                    $box.append('<p>Selected '+row.name+' ( '+row.desc+' )</p>');
                });
            }
        },
        //多分组模式菜单的切换事件
        //index: 当前选中Tab的下标，下标从 0 开始
        //tab: 当前Tab的源数据（json），不包含 list 节点的数据（具体列表项目的数据）
        eTabSwitch: function(index, tab){
            $box.empty();
            $box.append('<p>You switch to the Tab with index <strong>'+index+'</strong>, Tab name is <strong>'+tab.title+'</strong></p>');
        }
    });
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h2 class="page-header">4.1 鼠标操作菜单模式 <small>使用鼠标右键或鼠标移动</small></h2>
            <div class="row">
                <div class="col-md-6">
                    <p>鼠标右键打开常规模式菜单</p>
                    <div class="jumbotron" id="selectMenuRightClickBase">
                        <h3 class="text-center"><i class="fa fa-mouse-pointer"></i> Mouse right click this area</h3>
                    </div>
                    <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//html元素定义
<div class="jumbotron" id="selectMenuRightClickBase">
    <h3 class="text-center">
        <i class="fa fa-mouse-pointer"></i>
        Mouse right click this area
    </h3>
</div>
//javascript代码
$('#selectMenuRightClickBase').selectMenu({
    title : 'Regular menu',
    //常规菜单模式
    regular : true,
    //打开鼠标右键模式
    rightClick : true,
    data : baseMenuHeaderData
});
]]>
                    </script>
                </div>
                <div class="col-md-6">
                    <p>鼠标右键打开多功能模式菜单</p>
                    <div class="jumbotron" id="selectMenuRightClickAdv">
                        <h3 class="text-center"><i class="fa fa-mouse-pointer"></i> Mouse right click this area</h3>
                    </div>
                    <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//html元素定义
<div class="jumbotron" id="selectMenuRightClickAdv">
    <h3 class="text-center">
        <i class="fa fa-mouse-pointer"></i>
        Mouse right click this area
    </h3>
</div>
//javascript代码
$('#selectMenuRightClickAdv').selectMenu({
    title : 'Advanced menu',
    showField : 'name',
    keyField : 'id',
    //打开鼠标右键模式
    rightClick : true,
    data : selectMenuData
});
]]>
                    </script>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6">
                    <p>鼠标移入打开菜单，移出关闭菜单</p>
                    <div class="jumbotron" id="selectMenuMoveOpen">
                        <h3 class="text-center"><i class="fa fa-mouse-pointer"></i> Mouse enter this area to open menu, leave to hide menu</h3>
                    </div>
                    <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//html元素定义
<div class="jumbotron" id="selectMenuMoveOpen">
    <h3 class="text-center">
        <i class="fa fa-mouse-pointer"></i>
        Mouse enter this area to open menu, leave to hide menu
    </h3>
</div>
//javascript代码
$('#selectMenuMoveOpen').hover(function(){
    $(this).selectMenu({
        regular : true,
        data : selectMenuData
    });
},function(){
    $(this).selectMenuHide();
});
]]>
                    </script>
                </div>
            </div>
        </div>


        <div class="row-fluid">
            <h2 class="page-header">5.1 菜单使用动态数据 <small></small></h2>
            <p>
                <button type="button" class="btn btn-default" id="btnAddRow">Add row</button>
                <button type="button" class="btn btn-default" id="selectMenuDynamic"><i class="fa fa-server"></i> Select Menu</button>
            </p>
            <div class="row-fluid">
                <ul class="list-group col-md-3" id="ulDynamicMenu">
                    <li class="list-group-item">SelectPage</li>
                    <li class="list-group-item">SelectMenu</li>
                    <li class="list-group-item">bDialog</li>
                    <li class="list-group-item">bPage</li>
                    <li class="list-group-item">bTabs</li>
                </ul>
            </div>

            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
$(this).selectMenu({
    title : 'Dynamic data menu',
    regular : true,
    data : function(){
        var d = new Array();
        $('#ulDynamicMenu li').each(function(i,row){
            var rd = { content : $(row).text(), url : 'https://aaa.com' };
            d.push(rd);
        });
        return d;
    }
});
]]>
</script>
        </div>


        <div class="row-fluid">
            <h2 class="page-header">6.1 菜单嵌入网页模式 <small>不以弹出的形式展现</small></h2>
            <div class="row">
                <div class="col-md-6">
                    <p>常规模式菜单嵌入</p>
                    <div id="selectMenuEmbedBase"></div>
                </div>
                <div class="col-md-6">
                    <p>多功能模式菜单嵌入</p>
                    <div id="selectMenuEmbedAdv"></div>
                </div>
            </div>

            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//html元素定义，注意，一定要使用DIV，使用其它容器无效
<div id="selectMenuEmbedBase"></div>
//javascript代码
$('#selectMenuEmbedBase').selectMenu({
    showField : 'name',
    keyField : 'id',
    embed : true,//设置打开嵌入网页模式
    data : selectMenuGroupData
});
]]>
            </script>

        </div>





        <div class="row-fluid">
            <h2 class="page-header">7.数据联动 <small>多功能同时使用案例</small></h2>
            <div class="row">
                <div class="col-md-4">
                    <div id="selectMenuEmbedProvince"></div>
                </div>
                <div class="col-md-4">
                    <div id="selectMenuEmbedCity"></div>
                </div>
            </div>


            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//定义省和城市的数据，仅作演示
var province = [
    {id:'001',name:'广东'},
    {id:'002',name:'福建'},
    {id:'003',name:'河北'},
    {id:'004',name:'江苏'},
    {id:'005',name:'浙江'}
];
var city = [
    {id:'001',pId:'001',name:'广州'},
    {id:'002',pId:'001',name:'深圳'},
    {id:'003',pId:'002',name:'福州'},
    {id:'004',pId:'002',name:'厦门'},
    {id:'005',pId:'003',name:'石家庄'},
    {id:'006',pId:'003',name:'保定'},
    {id:'007',pId:'004',name:'南京'},
    {id:'008',pId:'004',name:'无锡'},
    {id:'009',pId:'005',name:'杭州'},
    {id:'010',pId:'005',name:'温州'}
];
var loadCityMenu = function(){
    var pss = $('#selectMenuEmbedProvince');
    $('#selectMenuEmbedCity').selectMenu({
        showField : 'name',
        keyField : 'id',
        title: '城市',
        embed : true,
        data : function(){//动态根据已选中的省份进行过滤城市，省份未选择则显示空城市列表
            var arr = new Array(), values = pss.selectMenuValues();
            if(values && values.length){
                $.each(city, function(i,row){
                    if(row.pId === values[0].id) arr.push(row);
                });
            }
            return arr;
        },
        eSelect: function(data){
            bDialog.alert('您选择了 <b>'+pss.selectMenuValues()[0].name+'</b> 省 <b>'+data[0].name+'</b> 市！');
        }
    });
};
//省份菜单初始化
$('#selectMenuEmbedProvince').selectMenu({
    showField : 'name',
    keyField : 'id',
    title: '省份',
    embed : true,
    multiple : false,
    data : province,
    eSelect: function(data){
        loadCityMenu();//选中省份后，刷新城市菜单
    }
});
//城市菜单初始化（使用空数据初始化）
loadCityMenu();
]]>
            </script>




            <h4 class="heading">与其它插件的联动 <small>SelectPage、bDialog等</small></h4>
            <div class="panel panel-default">
                <div class="panel-body">
                    <h4><a href="https://github.com/TerryZ/SelectPage" target="_blank">SelectPage</a></h4>
                    <p>简洁而强大的下拉分页选择器；支持远程数据（AJAX）、 autocomplete、键盘快速导航操作、分页展示、多选标签、i18n国际化支持等多功能的选择器插件</p>
                    <h4><a href="https://github.com/TerryZ/bDialog" target="_blank">bDialog</a></h4>
                    <p>可多层嵌套、高定制化的模态窗口，包含有多种使用形式
                    <ul>
                        <li>Modal <small class="text-muted">模态弹出窗口，可以拥有独立上下文的窗口</small></li>
                        <li>Alert <small class="text-muted">消息提示对话框</small></li>
                        <li>Mask <small class="text-muted">显示一个全屏遮罩</small></li>
                        <li>Toast <small class="text-muted">边角信息提示对话框，可以在屏幕的8个边角显示对话框</small></li>
                    </ul>
                    </p>
                </div>
            </div>
            <div class="row">
                <div class="col-md-3">
                    <button type="button" class="btn btn-default" id="selectMenuProvince">选择省份 <i class="fa fa-caret-down"></i></button>
                    选择的省份：<kbd id="kbdSelectedProvince">无</kbd>
                </div>
                <div class="col-md-3">
                    <input type="text" id="selectPageCity" class="form-control" placeholder="请选择城市" >
                </div>
            </div>
            <script type="syntaxhighlighter" class="brush:js">
<![CDATA[
//html
<div class="row">
    <div class="col-md-3">
        <button type="button" class="btn btn-default" id="selectMenuProvince">选择省份 <i class="fa fa-caret-down"></i></button>
        选择的省份：<kbd id="kbdSelectedProvince">无</kbd>
    </div>
    <div class="col-md-3">
        <input type="text" id="selectPageCity" class="form-control" placeholder="请选择城市" >
    </div>
</div>
//javascript
//初始化selectmenu
$('#selectMenuProvince').click(function(){
    $(this).selectMenu({
        showField : 'name',
        keyField : 'id',
        data : province,
        eSelect: function(data){
            if(data && data.length){
                $('#kbdSelectedProvince').text(data[0].name);
                //刷新城市的列表数据
                var arr = new Array();
                $.each(city, function(i,row){
                    if(row.pId === data[0].id) arr.push(row);
                });
                if(arr.length) $('#selectPageCity').selectPageData(arr);
            }
        }
    });
});
//初始化SelectPage
$('#selectPageCity').selectPage({
    showField: 'name',
    keyField: 'id',
    data: [],
    eSelect: function(data){
        if(data)
            bDialog.alert('您选择了 <b>'+$('#selectMenuProvince').selectMenuValues()[0].name+'</b> 省 <b>'+data.name+'</b> 市！');
    }
});
]]>
            </script>
        </div>


		
		
	</div>
	</div>


    


    <script type="text/javascript" src="../lib/jquery.min.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shCore.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushXml.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushCss.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJava.js" ></script>
    <script type="text/javascript" src="../lib/syntaxhighlighter/scripts/shBrushJScript.js" ></script>
    <script type="text/javascript" src="../lib/selectmenu/selectmenu.min.js" ></script>
    <script type="text/javascript" src="../lib/selectpage/selectpage.min.js" ></script>
    <script type="text/javascript" src="../lib/bdialog/b.dialog.min.js" ></script>
    <script type="text/javascript" src="../js/selectmenu/demo.js" ></script>
    <script type="text/javascript" src="../js/common.js" ></script>
    <script type="text/javascript">
    $(function(){
        SyntaxHighlighter.all();
        setActive('mnuDemo');
    });
    </script>




</body>
</html>